<template>
    <a-form :form="form" @submit="onFormSubmit">
        <a-form-item style="display: none;">
            <a-input type="hidden"
                     v-decorator="[
                        'id',
                        { rules: [{ required: true, message: 'Id不能为空' }] }
                     ]"
            />
        </a-form-item>
        <a-form-item label="角色名称" :label-col="{ span : 5 }" :wrapper-col="{ span : 19 }">
            <a-input placeholder="请输入" autocomplete="off"
                     v-decorator="[
                        'roleName',
                        { rules: [{ required: true, message: '请输入角色名称' }] }
                     ]"
            />
        </a-form-item>
        <a-form-item label="角色描述" :label-col="{ span : 5 }" :wrapper-col="{ span : 19 }">
            <a-textarea placeholder="请输入" autocomplete="off"
                        v-decorator="[
                            'roleDescribe',
                            { rules: [{ required: true, message: '请输入角色描述' }] }
                        ]"
            />
        </a-form-item>
        <a-button type="primary" html-type="submit" block>提交</a-button>
    </a-form>
</template>

<script>
    import { getSysRole,editSysRole } from '../../../apis/upms';
    export default {
        data(){
            return {
                form : this.$form.createForm(this),
            }
        },
        created(){
            // 根据Id获取角色信息
            let roleId = this.$route.params['roleId'];
            getSysRole(roleId)
                .then(result => {
                    let role = result.data;
                    if (role){
                        this.form.setFieldsValue({
                            id : role.id,
                            roleName : role.roleName,
                            roleDescribe : role.roleDescribe
                        });
                    }else {
                        this.$modal.error({
                            content : 'Id不存在',
                            onOk : () => this.$router.push({ name : 'sysRoleManage' }).then()
                        });
                    }
                });
        },
        methods : {
            /**
             * 监听表单提交
             * @param e
             */
            onFormSubmit : function (e) {
                e.preventDefault();
                this.form.validateFields((err, params) => {
                    if (!err) {
                        editSysRole(params).then(() => {
                            this.$message.success("保存成功").then();
                            this.$router.push({
                                name : 'sysRoleManage',
                                query : { reload : new Date().getTime().toString() }
                            }).then();
                        });
                    }
                });
            }
        }
    }
</script>
